<script>
/**
 * @name calendar-view
 * @desc 日历-月份组件
 */

import { MonthArr } from '@/utils'

export default {
  name: 'calendar-view',

  props: {
    year: { type: Number, default: 2018 },
    month: { type: Number, default: 0 },
    small: { type: Boolean, default: false },
    currDate: { type: Number, default: 0 },
    onClick: { type: Function, default: () => {} }
  },

  data: () => ({
    days: ['日', '一', '二', '三', '四', '五', '六']
  }),

  computed: {
    table() {
      return MonthArr(this.year, this.month).map(row => {
        return row.map(v => {
          const className =
            v.date === this.currDate
              ? 'colActive'
              : !v.isCurrMonth
                ? 'colDisabled'
                : 'colNormal'
          return { ...v, className }
        })
      })
    }
  }
}
</script>

<template>
  <div>
    <h2
      :class="$sty.monthTitle"
      v-if="small"
    >{{month+1}}月</h2>

    <p
      :class="$sty.row"
      v-if="!small"
    >
      <span
        :class="$sty.header"
        :key="day"
        :style="{fontSize:small?'12px':'16px'}"
        v-for="day in 7"
      >{{days[day]}}</span>
    </p>

    <p
      :class="$sty.row"
      :key="rid"
      v-for="(row,rid) in table"
    >
      <span
        :class="$sty[col.className]"
        :key="cid"
        :style="{fontSize:small?'12px':'16px'}"
        @click="onClick(col.date)"
        v-for="(col,cid) in row"
      >{{col.label}}</span>
    </p>
  </div>
</template>

<style lang="scss" module>
.row {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.monthTitle {
  font-weight: bold;
}

.header {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2;
  color: #999;
  font-weight: bold;
}

%col {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  text-align: center;
  line-height: 2;
  transition: all 0.25s;
}

.colNormal {
  @extend %col;
}

.colDisabled {
  @extend %col;
  color: #ccc;
  pointer-events: none;
}

.colActive {
  @extend %col;
  background-color: $main-red;
  color: #fff;
}
</style>
